<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">温度详情</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="left-div">
                <h2>发货单号：{{ orderID }}</h2>
                <div class="Download">
                    <el-button size="small" type="primary" @click="ExcelLog">下载温度</el-button>
                </div>
                <table class="table-temp">
                    <tr>
                        <th>Date Time</th>
                        <th>℃</th>
                    </tr>
                    <tr v-for="(temp,index) in TemperLog" :key="index">
                        <td class="tda">{{ temp.create_time }}</td>
                        <td class="tdb">{{ temp.tempera }}</td>
                    </tr>
                </table>
            </div>
            <div class="right-div">
                <el-card class="box-card">
                    <div id="main" class="qu-div"></div>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
// 导入曲线图包
import echarts from 'echarts'
// 时间处理模块
import moment from 'moment'
import { request_temp_get } from '../axios_api/api'
export default {
    data() {
        return {
            oid: '',
            orderID: '',
            TemperLog: [],
            timedata: [],
            tempdata: [],
        }
    },
    mounted() {
        this.oid = this.$route.query.oid
        this.RequestTemp();
    },
    methods: {
        // 文件下载
        ExcelLog() {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../lib/Export2Excel')
                const tHeader = ['Order ID', 'Date Time', 'Tempear(℃)']   // 自定义标题
                const filterVal = ['oid', 'create_time', 'tempera']   // 对应表字段
                const list = this.TemperLog   // 需要下载的数据
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, '运单' + this.orderID + '温度详情');  //导出文件名称
            })
        },
        // 文件下载所调用函数
        formatJson(filterVal, jsonData) {
            console.info(jsonData)
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        // 请求温度
        RequestTemp() {
            let params = { oid: this.oid }
            request_temp_get(params).then(resp => {
                if (resp.code === 200) {
                    for (let i = 0; i < resp.templist.length; i++) {
                        resp.templist[i].create_time = moment(resp.templist[i].create_time).format('YYYY-MM-DD HH:mm:ss')
												this.orderID = resp.templist[i].oid
												// 将时间添加到空列表中
												this.timedata.push(resp.templist[i].create_time)
												// 将温度添加到空列表中
                        this.tempdata.push(resp.templist[i].tempera)
                    }
                    this.TemperLog = resp.templist
								}
								console.log(resp.templist)
								// 传递参数给折线图，并调用折线图函数
                let time = this.timedata
                let temp = this.tempdata
                let id = 'main'
                this.Options(time, temp);
            })
        },
        // 曲线图
        Options(time, temp) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 使用刚指定的配置项和数据显示图表。
            let option = {
                title: {
                    text: '温度趋势'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: time,
                },
                yAxis: {
                    type: 'value',
                    name: '℃',
                },
                series: [
                    {
                        name: '温度',
                        type: 'line',
                        data: temp,
                    },
                ],
            }
            myChart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped>
h2 {
    color: gray;
}
.table-temp {
    color: gray;
    text-align: center;
    border: 1px solid #e6e9ee;
    > tr {
        line-height: 18px;
        > td {
            border: 1px solid #e6e9ee;
        }
        > .tdb {
            width: 60px;
        }
        > .tda {
            width: 180px;
        }
    }
}
.box-card {
    width: 1200px;
}
.left-div {
    float: left;
    margin-bottom: 20px;
}
.right-div {
    float: left;
    margin-top: 150px;
}
.qu-div {
    height: 360px;
    width: 1150px;
}
.Download {
    margin: 0 0 10px 175px;
}
</style>